<template>
    <div class="teacherCenter">
        <div class="tabs">
            <span class="tab on">讲师信息</span>
        </div>
        <div class="main_cont form" v-show="edit">
            <form action="" @submit="userUpdate">
                <div class="form_group">
                    <div class="label">讲师头像:</div>
                    <div class="form_ctl upload_ctl">
                        <input type="hidden" v-model="teacherInfo.avatar">
                        <el-upload
                                class="avatar-uploader"
                                action="http://172.16.2.50:10001/core/teacher/FuploadMsg"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                        >
                            <img style="height: 100px;width: 200px" v-if="teacherInfo.avatar" v-model="teacherInfo.avatar" :src="teacherInfo.avatar" class="avatar" alt="">
                            <i v-else  class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <p class="tip">* 图片尺寸为800x800，图片大小&lt;500KB，建议使用真人照片，便于品牌宣传效果</p>
                    </div>
                </div>
                <div class="form_group">
                    <div class="label">讲师昵称:</div>
                    <div class="form_ctl">
                        <input type="text" v-model="teacherInfo.name" class="form_input" placeholder="请输入昵称">
                    </div>
                </div>
                <div class="form_group">
                    <div class="label">个人简介</div>
                    <div class="form_ctl">
                        <div id="lecturerInfo"></div>
                        <quill-editor class="editor"
                                      v-model="teacherInfo.intro"
                                      ref="myQuillEditor"
                                      :options="editorOption">
                        </quill-editor>
                    </div>
                </div>
                <div class="form_group">
                    <div class="label">&nbsp;</div>
                    <div class="form_ctl">
                        <button class="submit_btn queren">确认</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="main_cont form" v-show="!edit">
            <br>
            <div class="form_group">
                <div class="label">讲师头像:</div>
                <div class="form_ctl upload_ctl">
                    <input type="hidden" v-model="teacherInfo.avatar">
                    <div class="preview">
                        <img :src="teacherInfo.avatar" alt="" v-if="teacherInfo.avatar">
                        <i class="iconfont" v-else>&#xe6b2;</i>
                    </div>
                </div>
            </div>
            <div class="form_group">
                <div class="label">讲师昵称:</div>
                <div class="form_ctl">
                    <div class="text">{{teacherInfo.name}}</div>
                </div>
            </div>
            <div class="form_group">
                <div class="label">个人简介:</div>
                <div class="form_ctl">
                    <div class="text" v-html="teacherInfo.intro"></div>
                </div>
            </div>
            <div class="form_group">
                <div class="label">&nbsp;</div>
                <div class="form_ctl">
                    <button href="javascript:" @click="edit = true" class="submit_btn queren">修改</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TeacherCenter",

        data() {
            return {
                editorOption:{},
                teacherMobile:'',
                edit: false,
                teacherInfo: {
                    avatar:'',
                    name:'',
                    intro:'',
                }
            }
        },
        methods: {
            getByTeacher() {
                var that=this;
                this.$http.post("/core/teacher/getTeacherByMobile?mobile="+this.teacherMobile).then(function (resp) {
                    that.teacherInfo=resp.data;
                })
            },
            //图片上传成功后的回调
            handleAvatarSuccess(res, file) {
                this.teacherInfo.avatar = res;
            },
            //图片选择后的判断，是否为图片及图片大小限制
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },


            userUpdate(e) {
                e.preventDefault();
                var that=this;
                this.$http.post(`/core/teacher/updateTeacher`,this.teacherInfo).then(function (resp) {
                    if (resp.data.code===2000){
                        that.$message.success(resp.data.msg);
                        that.edit=false;
                    }else {
                        that.$message.error(resp.data.msg);
                    }

                })
            },
            setUrl(res) {
                this.teacherInfo.avatar = res.url;
            }
        },
        mounted() {
            this.teacherMobile=window.sessionStorage.getItem("mobile");
            this.getByTeacher();
        },

    }
</script>

<style lang="scss" rel="stylesheet/scss">
    .upload_ctl{
        .preview{
            width: 200px;
            height: 100px;
            background-color: #f5f5f5;
            text-align: center;
            margin-bottom: 10px;
            img {
                width: 100%;
                height: 100%;
            }
            i{
                line-height: 120px;
                font-size: 80px;
                color: #ddd;
            }
        }
    }
    .queren{
        margin-left: 110px;
    }
    .yzm_btn{
        line-height: 33px;
        padding: 0;
        width: 100px;
        background-color: #107bc5;
        border: 1px solid #0f75bb;
        color: #fff;
        border-radius: 3px;
        &:disabled{
            background-color: #ccc;
            border-color: #ddd;
            color: #aaa;
        }

    }
</style>
